<template>
  <div class="homewrap">
    <div class="lh-wrap">
      <div class="bebackprv">
        <input class="detailBackBtn" type="button" value="返回 商品详情" @click="backSubmit">
      </div>
      <div class="detailTitle">
        商品详情
      </div>
      <div class="detailCont">
        <strong class="detailLeftTitle">{{this.prodetail.good_numberT}}：</strong>
        <div class="detailRightCont">{{this.prodetail.good_number}}</div>
      </div>
      <div class="detailCont">
        <strong class="detailLeftTitle">{{this.prodetail.good_nameT}}：</strong>
        <div class="detailRightCont">{{this.prodetail.good_name}}</div>
      </div>
      <div class="detailCont">
        <strong class="detailLeftTitle">{{this.prodetail.accountT}}：</strong>
        <div class="detailRightCont">{{this.prodetail.account}}</div>
      </div>
      <div class="detailCont">
        <strong class="detailLeftTitle">{{this.prodetail.opus_name_listT}}：</strong>
        <div class="detailRightCont">{{this.prodetail.opus_name_list}}</div>
      </div>
      <div class="detailCont">
        <strong class="detailLeftTitle">{{this.prodetail.create_timeT}}：</strong>
        <div class="detailRightCont">{{this.prodetail.create_time}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request.js'
export default {
  name: 'ProDetail',
  data () {
    return {
      prodetail: {
        good_numberT: '商品编号',
        good_number: '',
        good_nameT: '商品名称',
        good_name: '',
        accountT: '所属产品商',
        account: '',
        opus_name_listT: '授权IP',
        opus_name_list: '猪猪侠',
        create_timeT: '新增时间',
        create_time: ''
      }
    }
  },
  methods: {
    backSubmit () {
      this.$router.go(-1)
    },
    //  获取详情信息
    getDetail (data) {
      request.proDetail(data)
        .then((res) => {
          console.log(res)
          this.prodetail.good_number = res.good_number
          this.prodetail.good_name = res.good_name
          this.prodetail.account = res.account
          this.prodetail.opus_name_list = this.ssTring(res.opus_name_list)
          this.prodetail.create_time = this.resolvingDate(res.create_time)
        })
        .catch((error) => {
          console.log(error)
        })
    },
    //  处理返回时间
    resolvingDate (date) {
      //  date是传入的时间
      let d = new Date(date)
      let month = (d.getMonth() + 1) < 10 ? '0' + (d.getMonth() + 1) : (d.getMonth() + 1)
      let day = d.getDate() < 10 ? '0' + d.getDate() : d.getDate()
      let hours = d.getHours() < 10 ? '0' + d.getHours() : d.getHours()
      let min = d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes()
      let sec = d.getSeconds() < 10 ? '0' + d.getSeconds() : d.getSeconds()
      let times = d.getFullYear() + '-' + month + '-' + day + ' ' + hours + ':' + min + ':' + sec
      return times
    },
    ssTring (str) {
      if (!str) {
        return 'undefined'
      } else {
        let strs = []
        strs = str.split(',').filter(function (s) {
          //  注：IE9(不包含IE9)以下的版本没有trim()方法
          return s && s.trim()
        })
        let newStr = strs.join()
        let nstr
        if (newStr.indexOf('/1') !== -1) {
          nstr = newStr.replace(/\/1/g, '')
        }
        if (newStr.indexOf('/2') !== -1) {
          nstr = newStr.replace(/\/2/g, '')
        }
        return nstr
      }
    }
  },
  mounted () {
    this.getDetail({
      params: {
        goodId: this.$route.params.id
      }
    })
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.homewrap
  padding 20px 20px 5px
  .lh-wrap
    min-width 960px
    box-sizing border-box
    background-color #fff
    padding 30px
    box-shadow 0px 2px 5px #e5e6ec
.bebackprv
  .detailBackBtn
    background-color #fff
    width 120px
    height 36px
    line-height 36px
    text-align center
    font-size 14px
    color #333
    border-radius 4px
    box-sizing border-box
    border 1px solid #ddd
    outline none
    cursor pointer
.detailTitle
  line-height 36px
  font-size 24px
  color #333333
  margin 10px 0 18px
.detailCont
  overflow hidden
  .detailLeftTitle
    line-height 36px
    width 100px
    font-size 14px
    font-weight 500
    color #333
    float left
  .detailRightCont
    white-space normal
    word-break break-all
    line-height 36px
    min-width 795px
    max-width 88.33%
    font-size 14px
    color #333
    float left
</style>
